<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="tab J_tab">
        <div class="item current">选项1</div>
        <div class="item">选项2</div>
        <div class="item">选项3</div>
      </div>
      <div class="page J_page">
        <div class="item active">页面1</div>
        <div class="item">页面2</div>
        <div class="item">页面3</div>
      </div>
    </div>
    <script type="text/javascript">
      (function (doc) {
        var oTab = document.getElementsByClassName("J_tab")[0],
          oPage = document.getElementsByClassName("J_page")[0],
          tabItems = oTab.getElementsByClassName("item"),
          pageItems = oPage.getElementsByClassName("item"),
          curIdx = 0;

        var init = function () {
          bindEvent();
        };

        function bindEvent() {
          oTab.addEventListener("click", tabClick, false);
        }

        function tabClick(e) {
          var e = e || window.event,
            tar = e.target || e.srcElement,
            className = tar.className;
          if (className === "item") {
            tabChange(tar);

            //   for (var i = 0; i < tabItems.length; i++) {
            //      tabItems[i].className = "item";
            //      pageItems[i].className = "item";
            //   }
            //   tar.className += " current";
            //   pageItems[curIdx].className += " active";
          }
        }
        function tabChange(target) {
          tabItems[curIdx].className = "item";
          pageItems[curIdx].className = "item";

          curIdx = Array.prototype.indexOf.call(tabItems, target);
          tabItems[curIdx].className = " current";
          pageItems[curIdx].className = " active";
        }

        init();
      })(document);
    </script>
  </body>
</html>
